<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="../../zxt/zxt.js"></script>
		<script>
			importZXT("../../zxt");
		</script>
		<script type="text/javascript" src="../data/datasource.js"></script>
	</head>

	<body>

		<table style='width:400px'>
			<tr>
				<td><div id="btnDISABLE" zxt="zxt.ui.Button" zxt.label="disable" zxt.text="DISABLE" zxt.mode="NORMAL"></div></td>
				<td><div id="btnLABEL" zxt="zxt.ui.Button" zxt.label="disable" zxt.text="LABEL" zxt.mode="NORMAL"></div></td>
				<td><div id="btnMASK" zxt="zxt.ui.Button" zxt.label="disable" zxt.text="MASK" zxt.mode="NORMAL"></div></td>
				<td><div id="btnNORMAL" zxt="zxt.ui.Button" zxt.label="enable" zxt.text="NORMAL" zxt.mode="NORMAL"></div></td>
			</tr>
		</table>

		<hr>

		<div id="aGrid" zxt="zxt.ui.DataGrid" zxt.model="tmodel" zxt.selMode="1" zxt.editMode="1" zxt.start="0" zxt.limit="20" zxt.fixHeight="true" zxt.height="190" style="width: 100%; overflow:auto">
			<div zxt.column="key" zxt.hidden="true" ></div>
			<div zxt.column="id" zxt.title="员工工号" zxt.width="200" zxt.hidden="false" zxt.conf="Hide:'179371'"></div>
			<div zxt.column="sex" zxt.title="性别" zxt.width="100">
				<div conf="Options" >
					<div zxt.option="Male" zxt.label="男的"></div>
					<div zxt.option="Female" zxt.label="女的"></div>
				</div>
			</div>

			<div zxt.column="birthday" zxt.conf="Format:'yyyymmdd', Hide:'0' "></div>

			<div zxt.column="bank" zxt.width="250" zxt.conf="Format:'$VALUE$ $LABEL$'">
				<div conf="Options" >
					<div zxt.option="CMB" zxt.label="招商银行"></div>
					<div zxt.option="*" zxt.label="白金卡"></div>
				</div>
			</div>

			<div zxt.column="type" zxt.title="类别" zxt.conf="Format:'$VALUE$ $LABEL$', PadLength:4">
				<div conf="Options" >
					<div zxt.option="11" zxt.label="个人普卡"></div>
					<div zxt.option="12" zxt.label="白金卡"></div>
					<div zxt.option="13" zxt.label="钻石卡"></div>
				</div>
			</div>
			<div zxt.column="vip" zxt.title="VIP" zxt.width="50" zxt.hidden="false"></div>
			<div zxt.column="card" zxt.title="卡号" zxt.width="350" zxt.hidden="false"></div>

			<div zxt.column="inter" zxt.conf="Format:'$VALUE$ $LABEL$', DefaultL:'[$VALUE$?]' ">
				<div conf="Options" >
					<div zxt.option="A" zxt.label="个人普卡"></div>
					<div zxt.option="B" zxt.label="白金卡"></div>
					<div zxt.option="C" zxt.label="钻石卡"></div>
				</div>
			</div>

			<div zxt.column="aaa">
				<div conf="Check" zxt.check="1" zxt.uncheck="0"></div>
			</div>
		</div>
		<div id="scroller" zxt="zxt.ui.DataScroller" zxt.front="true" zxt.model="tmodel" zxt.page="20"></div>

		<hr>
		<table>
			<tr>
				<td>getType()</td>
				<td>返回控件类型</td>
				<td>
				<input type="button" name="getType" value="getType"
				onclick="alert('控件的type为'+$zxtUI.aGrid.getType());"/>
				</td>
			</tr>
			<tr>
				<td>editMode(v)</td>
				<td>[GETTER | SETTER] 表格的编辑模式 0:只读模式 | 1:全表编辑 | 2:单行编辑 | 3:单元格编辑 | 4:单元格切换编辑</td>
				<td>
				<input type="button" name="editMode" value="editMode"
				onclick="alert('控件的editMode为'+$zxtUI.aGrid.editMode());"/>
				</td>
			</tr>
			<tr>
				<td>empty()</td>
				<td>表格清空</td>
				<td>
				<input type="button" name="empty" value="empty"
				onclick="$zxtUI.aGrid.empty()"/>
				</td>
			</tr>
			<tr>
				<td>getCheckedRows()</td>
				<td>获取选中的行号列表</td>
				<td>
				<input type="button" name="getCheckedRows" value="getCheckedRows"
				onclick="getCheck();"/>
				</td>
			</tr>
			<tr>
				<td>selMode(选择模式编号) </td>
				<td>[GETTER | SETTER] 表格的选择模式 0:无选择 | 1:多选框(checkBox) | 2:单选框(radioButton) </td>
				<td>
				<input type="button" name="selMode" value="selMode"
				onclick="alert('控件的selMode为'+$zxtUI.aGrid.selMode());"/>
				</td>
			</tr>
		</table>
		<input type="button" class='por-Button' onclick="javascript:setCheck();" value="SET CHECK"/>
		<input type="button" class='por-Button' onclick="javascript:unsetCheck();" value="UNSET CHECK"/>
		<input type="button" class='por-Button' onclick="javascript:getCheck();" value="GET CHECK"/>
		<input type="button" class='por-Button' onclick="javascript:getRowData();" value="GET ROW"/>
		<input type="button" class='por-Button' onclick="javascript:getRowOld();" value="GET ROW OLD"/>
		<input type="button" class='por-Button' onclick="javascript:reloadOpts();" value="RELOAD OPTS"/>
		<input id="btn" type="button" class='por-Button' onclick="javascript:clearGrid();" value="Clear Grid"/>
		<input type="button" class='por-Button' onclick="javascript:getDataString();" value="GET GRID DATA"/>
		<input type="button" class='por-Button' onclick="javascript:hideColumn();" value="HIDE COLUMN"/>
		<input type="button" class='por-Button' onclick="javascript:addColor();" value="addColor"/>
		<input type="button" class='por-Button' onclick="javascript:removeColor();" value="removeColor"/>

		<div>
			<a href="../index.html">返回</a>
		</div>
	</body>

</html>

<script>
	$zxt.mode("NORMAL");
	$zxt.init();
	$zxtUI.scroller.addListener($zxtUI.aGrid);
	function onClick$btnDISABLE() {
		$zxt.mode("DISABLE");
		$zxt.render();
	}
	$('body').on('scroll',function(){
		alert(1);
	});

	function onClick$btnLABEL() {
		$zxt.mode("LABEL");
		$zxt.render();
	}

	function onClick$btnMASK() {
		$zxt.mode("MASK");
		$zxt.render();
	}

	function onClick$btnNORMAL() {
		$zxt.mode("NORMAL");
		$zxt.render();
	}
</script>

<script>

function setCheck(){
$zxtUI.aGrid.setRowChecked(0, true);
$zxtUI.aGrid.setRowChecked(1, true);
}

function unsetCheck(){
$zxtUI.aGrid.setRowChecked(0, false);
}

function getCheck(){
var sels = $zxtUI.aGrid.getCheckedRows();
alert(sels);
}

function getRowData(){
var row = $zxtUI.aGrid.getRowData(0);
zxt.util.alert(row);
}

function getRowOld(){
var row = $zxtUI.aGrid.getRowOld(0);
zxt.util.alert(row);
}

function reloadOpts(){
var opt4typ = [{label:"奥运卡", value:"101"}, {label:"世博卡", value:"102" }];
var c4type = { _options: opt4typ };
var conf = $zxtUI.aGrid.getColumn("type").conf();
$.extend(conf, c4type);
$zxtUI.aGrid.render();
}

function clearGrid(){
if(document.getElementById("btn").value=="Clear Grid"){
tmodel.clear();
document.getElementById("btn").value="Query";
}else{
tmodel.setParam({});
document.getElementById("btn").value="Clear Grid";
};
}

function getDataString(){

var data = $zxtUI.aGrid.getGridData();

var string = zxt.help.getGridString($zxtUI.aGrid);
alert(string);
}

function hideColumn(){
$zxtUI.aGrid.setColumnVisible("bank", false);
$zxtUI.aGrid.render();
}

function addColor(){
var sels = $zxtUI.aGrid.getCheckedRows();
for (var i=0; i < sels.length; i++) {
$zxtUI.aGrid.addRowColor(sels[i]);
};
}

function removeColor(){
var sels = $zxtUI.aGrid.getCheckedRows();
for (var i=0; i < sels.length; i++) {
$zxtUI.aGrid.removeRowColor(sels[i]);
};
}
</script>

